<template>
    <div id="goods_list_item">
        <span class="list_item" v-for="(item,index) in message" v-bind:key="index"  @click="itemClick(index)">
            <img :src="item.show.img" alt="" class="goodsImg">
            <p class="title">{{item.title}}</p>
            <div class="details">
                <span class="price">{{item.price}}元</span>
                <span><img src="../../../assets/img/goods/start.png" alt="" class="start" ></span>
                <span class="cfav">{{item.cfav}}</span>
            </div>
            </span>
    </div>
</template>

<script>
    export default {
        name: "GoodsListItem",
        props:{
            message:{
                type:Array,
                default(){
                    return {}
                }
            }
        },
        methods:{
            itemClick(index){
                this.$router.push({
                    path:'/detail',
                    query:{id:this.message[index].iid}
                }
                )
            }
        }
    }
</script>

<style scoped>
    #goods_list_item{
        display: flex;
        flex-wrap: wrap;
        width:100%;
        justify-content: space-around;
    }
    .list_item{
        width: 48%;
    }
    .list_item .goodsImg{
        width: 150px;
        height: 230px;
        border-radius: 5px;
        margin-top: 10px;
    }
    .start{
        margin-left: 15px;
    }
    .title{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .details{
        text-align: center;
    }
    .price{
        color: lightcoral;
    }
    .cfav{
        margin-left: 5px;
    }
</style>